<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs type="border-card">
        <el-tab-pane label="基础设置">
          <div class="tip" style="margin-top: 20px">
            <p>不同的运营阶段您可以选择不同的设置</p>
            <p>
              套餐到期后，套餐类型显示已过期，会员权限按套餐到期使用权限执行。套餐到期后会员资源不改变，无有效期限制
            </p>
          </div>
          <!-- 自定义组件，标题 -->
          <PageTitle :show-before="true">
            <template v-slot:before>
              <h2>套餐基础配置</h2>
            </template>
          </PageTitle>
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="新注册会员赠送服务">
              <el-radio-group v-model="radio">
                <el-radio :label="3">基础会员</el-radio>
                <el-radio :label="6">优选企业</el-radio>
                <el-radio :label="9">专精特新小巨人</el-radio>
                <el-radio :label="9">大优强/单项冠军/新能源</el-radio>
                <el-radio :label="9">机关事业</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="套餐到期前提醒">
              <el-input placeholder="" style="width: 30%">
                <template slot="prepend">提前</template>
                <template slot="append">天</template>
              </el-input>
              <span style="color: #999; margin-left: 10px">
                <i class="el-icon-info"></i>
                0为不提醒
              </span>
            </el-form-item>
            <el-form-item label="名企套餐">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="基础会员" disabled></el-checkbox>
                <el-checkbox label="优选企业" disabled></el-checkbox>
                <el-checkbox label="专精特新小巨人" disabled></el-checkbox>
                <el-checkbox
                  label="大优强/单项冠军/新能源"
                  disabled
                ></el-checkbox>
                <el-checkbox label="机关事业" disabled></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
          <!-- 自定义组件，标题 -->
          <PageTitle :show-before="true">
            <template v-slot:before>
              <h2>重新开通套餐配置</h2>
            </template>
          </PageTitle>
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="重开套餐时间处理">
              <el-radio-group v-model="radio">
                <el-radio :label="3">叠加</el-radio>
                <el-radio :label="6">不叠加</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="重开套餐资源处理">
              <el-radio-group v-model="radio">
                <el-radio :label="3">叠加</el-radio>
                <el-radio :label="6">不叠加</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
          <!-- 自定义组件，标题 -->
          <PageTitle :show-before="true">
            <template v-slot:before>
              <h2>会员到期套餐配置</h2>
            </template>
          </PageTitle>
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="套餐到期使用权限"
              ><span style="color: rgb(58, 142, 230); cursor: pointer"
                >[配置使用权限]</span
              ></el-form-item
            >
            <el-form-item label="套餐到期资源处理">
              <el-radio-group v-model="radio">
                <el-radio :label="3">保留</el-radio>
                <el-radio :label="6">清空</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="套餐到期超出职位处理">
              <el-radio-group v-model="radio">
                <el-radio :label="3">保留全部职位</el-radio>
                <el-radio :label="6">关闭超出职位</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="套餐设置">
          <div class="tip" style="margin-top: 20px">
            <p>不同的运营阶段您可以选择不同的设置</p>
          </div>
          <el-table :data="list" style="width: 100%">
            <el-table-column
              prop="name"
              label="套餐名称"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="价格"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="限时优惠"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="时长"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="内容"
              width="220"
              align="center"
            >
              <template slot-scope="scope">
                简历点 {{ scope.row.download_resume_point }}；赠积分
                {{ scope.row.gift_point }}
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="推荐"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag :type="scope.row.recommend ? 'success' : 'danger'">{{
                  scope.row.recommend ? "是" : "否"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="排序"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="prop"
              label="显示状态"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag :type="scope.row.is_display ? 'success' : 'danger'">{{
                  scope.row.is_display ? "显示" : "不显示"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="会员申请"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag :type="scope.row.is_apply ? 'success' : 'danger'">{{
                  scope.row.is_apply ? "允许" : "不允许"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="prop"
              label="操作"
              width="width"
              align="center"
            >
              <template>
                <el-button type="primary" size="small" @click="editEnterpriseConfigDialog=true">编辑</el-button>
                <el-button type="danger" size="small" @click="delBtn">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row :gutter="10" style="margin-top: 20px; margin-left: 20px">
            <el-button
              type="primary"
              size="small"
              @click="enterpriseConfigDialog = true"
              >添加套餐</el-button
            >
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="简历下载点">
          <div class="tip" style="margin-top: 20px">
            <p>不同的运营阶段您可以选择不同的设置</p>
          </div>
          <!-- 自定义组件，标题 -->
          <PageTitle :show-before="true">
            <template v-slot:before>
              <h2>简历下载点数配置</h2>
            </template>
          </PageTitle>
          <el-form
            ref="form"
            :model="form"
            label-width="200px"
            style="margin-top: 20px"
          >
            <el-form-item label="刷新时间一天之内">
              <el-input placeholder="" style="width: 20%"></el-input>
              点
            </el-form-item>
            <el-form-item label="刷新时间三天之内"
              ><el-input placeholder="" style="width: 20%"></el-input>
              点</el-form-item
            >
            <el-form-item label="刷新时间五天之内"
              ><el-input placeholder="" style="width: 20%"></el-input>
              点</el-form-item
            >
            <el-form-item label="刷新时间五天以上"
              ><el-input placeholder="" style="width: 20%"></el-input>
              点</el-form-item
            >
            <el-form-item label="">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
          <!-- 自定义组件，标题 -->
          <PageTitle :show-before="true">
            <template v-slot:before>
              <h2>优质简历下载点数配置</h2>
            </template>
          </PageTitle>
          <el-form label-width="200px" style="margin-top: 20px">
            <el-form-item label="下载优质简历所需">
              <el-input placeholder="" style="width: 20%"></el-input>点
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <enterpriseConfig :enterpriseConfigDialog.sync="enterpriseConfigDialog"/>
      <editEnterpriseConfig :editEnterpriseConfigDialog.sync="editEnterpriseConfigDialog"/>
    </div>
  </div>
</template>

<script>
import enterpriseConfig from '@/views/platformSystem/qyBusinessConfig/setMenuConfig/components/enterpriseConfig'
import editEnterpriseConfig from '@/views/platformSystem/qyBusinessConfig/setMenuConfig/components/editEnterpriseConfig'
export default {
  components: {
    enterpriseConfig,
    editEnterpriseConfig
  },
  data() {
    return {
      enterpriseConfigDialog: false,
      editEnterpriseConfigDialog: false,
      list: [
        {
          id: 1,
          name: "基础会员",
          icon: 0,
          expense: "0.00",
          days: 0,
          preferential_open: 0,
          preferential_expense: "0.00",
          preferential_expense_start: 0,
          preferential_expense_end: 0,
          download_resume_point: 1000,
          gift_point: 1000,
          jobs_meanwhile: 20,
          refresh_jobs_free_perday: 3,
          download_resume_max_perday: 50,
          service_added_discount: 0,
          enable_video_interview: 0,
          show_apply_contact: 1,
          note: "",
          recommend: 0,
          sort_id: 0,
          is_display: 1,
          is_apply: 1,
          im_max_perday: 50,
          im_total: 5000,
          resume_view_num: 0,
        },
        {
          id: 2,
          name: "优选企业",
          icon: 0,
          expense: "0.00",
          days: 0,
          preferential_open: 0,
          preferential_expense: "0.00",
          preferential_expense_start: 0,
          preferential_expense_end: 0,
          download_resume_point: 10000,
          gift_point: 10000,
          jobs_meanwhile: 50,
          refresh_jobs_free_perday: 5,
          download_resume_max_perday: 300,
          service_added_discount: 0,
          enable_video_interview: 1,
          show_apply_contact: 1,
          note: "",
          recommend: 0,
          sort_id: 0,
          is_display: 1,
          is_apply: 0,
          im_max_perday: 50,
          im_total: 500,
          resume_view_num: 0,
        },
        {
          id: 3,
          name: "专精特新小巨人",
          icon: 0,
          expense: "0.00",
          days: 0,
          preferential_open: 0,
          preferential_expense: "0.00",
          preferential_expense_start: 0,
          preferential_expense_end: 0,
          download_resume_point: 50000,
          gift_point: 50000,
          jobs_meanwhile: 50,
          refresh_jobs_free_perday: 50,
          download_resume_max_perday: 500,
          service_added_discount: 7,
          enable_video_interview: 1,
          show_apply_contact: 1,
          note: "",
          recommend: 0,
          sort_id: 0,
          is_display: 1,
          is_apply: 0,
          im_max_perday: 500,
          im_total: 50000,
          resume_view_num: 0,
        },
        {
          id: 4,
          name: "大优强\/单项冠军\/新能源",
          icon: 0,
          expense: "0.00",
          days: 0,
          preferential_open: 0,
          preferential_expense: "0.00",
          preferential_expense_start: 0,
          preferential_expense_end: 0,
          download_resume_point: 50000,
          gift_point: 50000,
          jobs_meanwhile: 50,
          refresh_jobs_free_perday: 50,
          download_resume_max_perday: 500,
          service_added_discount: 5,
          enable_video_interview: 1,
          show_apply_contact: 1,
          note: "",
          recommend: 0,
          sort_id: 0,
          is_display: 1,
          is_apply: 0,
          im_max_perday: 500,
          im_total: 50000,
          resume_view_num: 0,
        },
        {
          id: 5,
          name: "机关事业",
          icon: 0,
          expense: "0.00",
          days: 0,
          preferential_open: 0,
          preferential_expense: "0.00",
          preferential_expense_start: 0,
          preferential_expense_end: 0,
          download_resume_point: 50000,
          gift_point: 50000,
          jobs_meanwhile: 50,
          refresh_jobs_free_perday: 50,
          download_resume_max_perday: 500,
          service_added_discount: 0,
          enable_video_interview: 1,
          show_apply_contact: 1,
          note: "",
          recommend: 0,
          sort_id: 0,
          is_display: 1,
          is_apply: 0,
          im_max_perday: 500,
          im_total: 50000,
          resume_view_num: 0,
        },
      ],
    };
  },
  methods: {
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input-group__append {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
.tip {
  padding: 8px 16px;
  background-color: #fdf6ec;
  border-radius: 4px;
  border-left: 5px solid #f9c77c;
  margin: 0 0 20px;
  p {
    font-size: 14px;
    color: #e6a23c;
    line-height: 1em;
  }
}
</style>
